$video-size: 100px
$shadow-size: 2px

.videos
  white-space: nowrap

.videos-grid-flex
  display: flex
  flex-wrap: wrap
  flex: 1 1 100%

  @media (orientation: portrait)
    flex-direction: column

  .video-container
    flex: 1 1 100%
    flex-grow: 1

.videos-grid-aspect-ratio
  display: flex
  flex: 1 1 100%
  overflow: hidden
  justify-content: center
  align-items: center

  .video-container
    flex-grow: 0

.videos-grid-aspect-ratio-container
  display: flex
  align-self: center
  flex: 1 1 100%
  flex-wrap: wrap
  justify-content: center
  align-items: center
  overflow: hidden

.video-container
  background-color: rgba(black, 0.3)
  box-shadow: 0px 0px 1px rgba(black, 0.3)
  position: relative
  display: flex

  .nickname
    border: none
    background: transparent
    flex: 1
    font-size: 0.8rem
    padding: 2px 4px 2px 4px
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    color: white
    text-shadow: 0 0px 2px black
    text-align: center
    margin-left: 1.75rem

  video
    object-fit: cover
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    width: 100%
    height: 100%

  .video-stats
    z-index: 1
    color: white
    font-size: 0.7rem
    font-family: monospace
    text-shadow: 1px 1px black
    top: 0
    bottom: 1.35rem
    left: 0
    right: 0
    padding: 0.35rem
    position: absolute
    white-space: pre-wrap
    overflow-x: none
    overflow-y: auto

.video-footer
  position: absolute
  left: 0
  bottom: 0
  right: 0

  display: flex
  flex: 1 1 100%

  .vu-meter
    position: absolute
    left: 0.5rem
    bottom: 0.5rem

.video-container.mirrored video,
video.mirrored
    transform: rotateY(180deg)
    -webkit-transform: rotateY(180deg)
    -moz-transform: rotateY(180deg)

.videos-toolbar
  height: 20%
  max-height: 250px
  display: flex
  flex-wrap: nowrap
  justify-content: center
  overflow-x: auto
  overflow-y: hidden
  padding-bottom: 1px

  .video-container
    flex-grow: 0
    flex-shrink: 0

  &.hidden
    display: none

  // .video-container
  //   // flex: 0 0 $video-size
  //   width: $video-size
  //   height: $video-size
